<template>

  <div id="Company_drugs_medcode">
    <span>
      <img src="../assets/trace.png" alt="" class="bread-icon">
    </span>
    <el-breadcrumb style="display:inline-block">
      <el-breadcrumb-item>
        <span style="font-size:20px;">追溯码管理</span>
      </el-breadcrumb-item>
      <el-breadcrumb-item>
        <span style="font-size:15px;line-height:20px;">位置查询</span>
      </el-breadcrumb-item>
    </el-breadcrumb>
    <div class="content-wrap">
      <div class="topNav">
        <span class="navLeft">位置查询</span>
        <span class="navRight">
          <el-button size="small" @click="traceSearch" class="traceSearch">搜索</el-button>
        </span>
        <span class="navMid">
          <img class="icon-search" src="../assets/search.png" alt="">
          <el-input v-model="searchData" size="small" placeholder="请输入内容"></el-input>
        </span>
      </div>
      <div class="medcode-location" style="height:300px;padding:50px" v-show="activeShow">
          <el-steps :active="activeSteps" direction="vertical">
          <el-step title="生产企业" icon="iconfont icon-ti-factory" description="生产企业   2017-11-14    13:39:00 上海"></el-step>
          <el-step title="流通企业" icon="iconfont icon-ti-enterprise" description="流通企业   2017-11-15   14:45:00 上海"></el-step>
          <el-step title="杭州中转站" icon="iconfont icon-ti-exchange" description="杭州中转站    2017-11-16 13:47:00 杭州"></el-step>
          <el-step title="零售企业" style="max-width:100%!important;" icon="iconfont icon-ti-shop" description="零售企业"></el-step>
        </el-steps>
      </div>


    </div>

  </div>
</template>

<script>
  export default {
    data() {
      return {
        activeSteps:2,
        activeShow:false,
        searchData: '',
        adminId: '',
        adminToken: '',
        enterprise: '',
        dialogFormVisibleShow: false,
        // dialogFormVisibleSubmit: false,
        formLabelWidth: '150px',
        tableData: [{}],
        formData: {
          "code": "",
          "created_at": "",
          "drug": {
            "id": '',
            "created_at": "",
            "updated_at": "",
            "common_name": "",
            "approval_number": "",
            "approval_expiry_date": "",
            "expiry_date_number": '',
            "expiry_date_unit": "",
            "form": "",
            "standard": "",
            "factory": "",
            "enterprise": ''
          }
        },
        // submitForm:{}
      }
    },
    methods: {
      traceSearch() {
        if (this.searchData != '') {
          this.$http({
            url: '/trace-code/' + this.searchData + '/',
            method: 'get',
            headers: {
              'Authorization': 'Token ' + this.adminToken
            },
          }).then(
            response => {
              this.tableData = []
              this.tableData.push(response.data)
            // console.log(this.activeShow)
              this.$message({
                message:'查询成功',
                type:'success'
              })
              this.activeShow = true;
            }
          ).catch(error => {
            if (error.response) {
              // The request was made and the server responded with a status code
              // that falls out of the range of 2xx
              console.log(error.response.data);
              // console.log(error.response.status);
              // console.log(error.response.headers);
            } else if (error.request) {
              console.log(error.request);
            } else {
              console.log('Error', error.message);
            }
            // console.log(error.config);
            this.tableData = []
            this.$message({
              message: '查询失败',
              showClose: true,
              type: 'error'
            });
          });
        } else {
          this.$http({
            url: '/trace-code/',
            // url: '/drugs/'+adminId +'/',
            method: 'get',
            headers: {
              'Authorization': 'Token ' + this.adminToken
            },
            data: {
              page: 1,
              form: '',
              enterprise_id: this.adminId,
              search: '',
              ordering: ''
            }
          }).then(
            response => {
              //success
              console.log(response)
              this.tableData = response.data.results
            },
            response => {
              //error
              console.log(response)
              //   this.$message({
              //   message: response.data.detail,
              //   type: 'warning'
              // });
            }
          )
        }
      },
      handleClick(row) {
        this.dialogVisible = true
        console.log(row);
      },
      showForm(row) {
        console.log(row)
        this.dialogFormVisibleShow = true
        this.formData = row
      },
      //   changeForm(row){
      //     this.submitForm = row;
      //   },
    },
    mounted() {
      this.adminId = this.$store.getters.getInfo.id
      this.adminToken = this.$store.getters.getInfo.token
      this.enterprise = this.$store.getters.getInfo.enterprise
      this.$http({
        url: '/trace-code/',
        headers: {
          'Authorization': 'Token ' + this.adminToken
        },
        method: 'get',
        data: {
          page: 1,
          search: ''
        }
      }).then(
        response => {
          //success
          //   this.$message({
          //   message: '警告哦，这是一条警告消息',
          //   type: 'warning'
          // });
          console.log(response.data)
          this.tableData = response.data.results
        }
      )
    },
  }

</script>

<style scoped>
  #Company_drugs_medcode>>>.el-dialog {
    max-height: 600px;
    overflow: scroll;
  }

</style>
